<template>
  <div class="table-list-box">
    <div
      :class="[
        'table-list',
        rowClick ? '' : 'table-list-noRowClick',
        !filterTableData(nowpage).length > 0 ? 'table-list-no' : '',
      ]"
    >
      <el-table
        ref="tableRef"
        :data="filterTableData(nowpage)"
        :empty-text="emptyText"
        style="width: 100%"
        :show-header="showHeader"
        :border="border"
        @rowClick="handleRowClick"
      >
        <template #empty>
          <slot name="emptyFlag"></slot>
        </template>
        <el-table-column
          v-for="item in getColumns"
          :key="item.dataIndex"
          :label="item.title"
          :min-width="item.width"
          :prop="item.dataIndex"
          :resizable="false"
          align="center"
        >
          <template v-if="item.thslot" #header="scope">
            <slot :name="`th${item.dataIndex}`" :scope="scope">
              {{ item.title }}
            </slot>
          </template>
          <template v-else-if="item.sortable" #header>
            <button
              :class="sortClass(item.dataIndex)"
              @click="handleSort(item.dataIndex)"
            >
              {{ item.title }}
            </button>
          </template>

          <template v-else-if="item.selectable" #header>
            <div class="table-select">
              <ItSelect
                :prop="item.dataIndex"
                :placeholder="item.title"
                :select-data="item.options"
                :sel-value="getSelectVal(item.dataIndex)"
                @onSelect="handleChangeSelect"
              ></ItSelect>
            </div>
          </template>
          <template v-if="item.tdslot" #default="scope">
            <slot :name="`td${item.dataIndex}`" :scope="scope">
              {{ scope?.row[item.dataIndex] }}
            </slot>
          </template>
          <template v-else #default="scope">
            <span
              :className="`${item.omit ? 'table-row-ellipsis' : ''} table-row-${
                item.align || 'center'
              }`"
              :title="scope?.row[item.dataIndex]"
              >{{ scope?.row[item.dataIndex] }}</span
            >
          </template>
        </el-table-column>
      </el-table>
    </div>
    <div
      v-if="filterTableData(nowpage).length > 0 && getAmount > 0"
      class="table-foot"
    >
      <div class="table-foot-num">共{{ getAmount }}条数据</div>
      <div class="table-foot-pagination">
        <el-pagination
          v-model:currentPage="nowpage"
          background
          layout="prev, pager, next"
          :page-size="pageSize"
          :total="getAmount"
        />
      </div>
    </div>
  </div>
</template>
<script name="BasisTable" setup>
import { computed, ref, watch, onUpdated, onUnmounted } from 'vue'
const props = defineProps({
  // 总条数
  amount: {
    type: Number,
    default: 0,
  },
  // 当前页数
  page: {
    type: [String, Number],
    default: '1',
  },
  // 列表数据
  list: {
    type: Array,
    default: () => [],
  },
  /**
   * 表头配置
   * [{
   *   dataIndex: 'title',
   *   title: '政策标题',
   *   omit: false, // 是否超出省略
   *   align: 'left', // 对齐方式 left center right
   *   thslot: false, // 是否自定义表头
   *   tdslot: false, // 是否自定义单元格
   *   sortable:false,// 表头是否可排序
   *   selectable:true, // 表头是否是下拉选择
   *   options:[{ value: '', name: '全部' },] // 表头为下拉选择时的配置项
   *   width: '30', // 宽度
   *   show-header:true,//是否显示表头
   *   border:false,//是否有边框
   * }]
   */
  columns: {
    type: Array,
    default: () => [],
  },
  // 排序的项的初始值
  sortOptions: {
    type: Object,
    default: () => {
      return {
        // surplusTime: '',
        // closingDate: '',
      }
    },
  },
  // 下拉选择的项的初始值
  selectOptions: {
    type: Object,
    default: () => {
      return {
        // state: '',
      }
    },
  },
  pageSize: {
    type: Number,
    default: 20,
  },
  rowClick: {
    type: Boolean,
    default: true,
  },
  emptyText: {
    type: String,
    default: '暂无数据',
  },
  showHeader: {
    type: Boolean,
    default: true,
  },
  border: {
    type: Boolean,
    default: false,
  },
})
const getColumns = computed(() => {
  return props.columns
})

const emits = defineEmits([
  'rowClick',
  'update:sortOptions',
  'update:selectOptions',
  'update:page',
])

/**
 * 总条数
 */

const getAmount = computed(() => {
  return props.amount
})
const handleRowClick = (row, column, event) => {
  if (props.rowClick) {
    emits('rowClick', {
      row,
      column,
    })
  }
}
//
/**
 * 分页
 */

const nowpage = computed({
  get: () => parseInt(props.page),
  set: (val) => emits('update:page', val.toString()),
})
/**
 * 筛选
 */
let getSelectVal = computed(() => (v) => {
  return props.selectOptions[v]
})
const handleChangeSelect = (val) => {
  emits('update:selectOptions', {
    ...props.selectOptions,
    [val.prop]: val.value,
  })
}
/**
 * 排序
 */
let sortClass = computed(() => (v) => {
  return `table-sort-btn ${props.sortOptions[v]}`
})

const handleSort = (prop) => {
  let valObj = { ...props.sortOptions }
  let val = valObj[prop]
  for (const key in valObj) {
    valObj[key] = ''
  }
  switch (val) {
    case '':
      valObj[prop] = 'desc'
      break
    case 'desc':
      valObj[prop] = 'asc'
      break
    default:
      valObj[prop] = ''
      break
  }
  emits('update:sortOptions', valObj)
}

/**
 * 列表数据
 */

const filterTableData = computed(
  () => (v) =>
    props.list.map((item, index) => {
      return {
        order: (v - 1) * props.pageSize + index + 1,
        ...item,
      }
    })
)
const tableRef = ref(null)
defineExpose({ tableRef })

onUpdated(() => {
  // console.log('更新')
})
onUnmounted(() => {
  // console.log('注销')
})
</script>

<style scoped>
.table-list-box {
  margin: 0 auto;
}
.table-list {
  width: 100%;
  background: #ffffff;
  box-shadow: 2px 2px 6px rgba(6, 60, 255, 0.08);
  border-radius: 0px;
  margin-bottom: 20px;
}
.table-list-no {
  box-shadow: none;
}
.table-foot {
  display: flex;
  justify-content: space-between;
}
.table-foot-num {
  font-size: 15px;
  color: #a2abc7;
  line-height: 40px;
}

:deep(.el-table__empty-block .el-table__empty-text) {
  animation: changeopacity 1s;
}
@keyframes changeopacity {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
</style>
<style>
.table-select .it-select-input {
  font-size: 18px;
}
.table-list-noRowClick .el-table__body .el-table__row {
  cursor: default;
}
.el-table__empty-text {
  display: flex;
  flex-direction: column;
  line-height: 1.5;
  color: #a2abc7;
  font-size: 18px;
}
.el-table__empty-text span:nth-child(3) {
  color: #206ef2;
  cursor: pointer;
}
.table-row-ellipsis {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.table-row-center {
  text-align: center;
  display: block;
}
.table-row-right {
  text-align: right;
  display: block;
}
.table-row-left {
  text-align: left;
  display: block;
}
.el-table--border .el-table__inner-wrapper::after,
.el-table--border::after,
.el-table--border::before,
.el-table__inner-wrapper::before {
  opacity: 0;
}
.el-checkbox__label {
  display: none;
}
</style>
